<template>
  <el-dialog width="800px" :close-on-click-modal="false" title="绑定用户" :visible.sync="isShow" @close="hideDialog">
    <p class="custom-loading text-center" v-if="isLoading"><i class="el-icon-loading"></i></p>
    <el-table
      :data="dataList"
      @select="handleSelect"
      @select-all="handleSelectAll"
      border
      max-height="380"
      style="width: 100%"
      v-else>
      <el-table-column type="selection" align="center" width="60"></el-table-column>
      <el-table-column
        prop="userName"
        label="用户名"
        show-overflow-tooltip
        align="center">
      </el-table-column>
       <el-table-column
        prop="name"
        label="姓名"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="moveTel"
        label="手机号"
        align="center">
      </el-table-column>
       <el-table-column
        prop="deptName"
        label="所属部门"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="positionName"
        label="职位"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '1'">启用</span>
          <span v-else-if="scope.row.status === '2'">禁用</span>
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination
      @current-change="handleCurrentChange"
      :current-page="page.index"
      :page-size="page.size"
      layout="total, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>-->
    <div slot="footer" class="dialog-footer">
      <el-button @click="hideDialog">取 消</el-button>
      <el-button type="primary" :disabled="isSaveing" @click="handleSubmit">绑 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getImportUser, importUser } from '@/apis/user/organiza';
export default {
    props: ['isShowDialog', 'deptId', 'positionId'],
    watch: {
        isShowDialog (val) {
            this.isShow = val;
        },
        deptId (val) {
            return val;
        },
        positionId (val) {
            this.positionId = val;
            if (!val) return;
            this.getUserList();
        }
    },
    data () {
        return {
            isShow: null,
            dataList: [],
            selections: [],
            page: {
                index: 1,
                size: 10,
                total: 0
            },
            isLoading: false,
            isSaveing: false
        };
    },
    methods: {
        hideDialog () {
            this.$emit('close');
        },
        getUserList () {
            this.isLoading = true;
            getImportUser({deptId: this.deptId, positionId: this.positionId}).then(res => {
                if (res.code === 100) {
                    this.dataList = res.data;
                } else {
                    this.$message.error(res.message);
                }
            }).catch(() => {
                this.$message.error('getImportUser error');
            }).finally(() => {
                this.isLoading = false;
            });
        },
        handleSelect (selecttions) {
            this.selections = selecttions;
        },
        handleSelectAll (selecttions) {
            this.selections = selecttions;
        },
        handleSubmit () {
            if (this.selections.length === 0) {
                this.$message({
                    message: '请先选择用户',
                    type: 'warning'
                });
                return false;
            }
            this.isSaveing = true;
            const userIds = this.selections.map(item => {
                return item.userId;
            });
            importUser(this.positionId, userIds).then(res => {
                if (res.code === 100) {
                    this.$emit('importDone');
                } else {
                    this.$message.error(res.message);
                }
            }).finally(() => {
                this.isSaveing = false;
            });
        }
    /* handleCurrentChange () {
      console.log('handleCurrentChange')
    } */
    }
};
</script>
<style>

</style>
